<!DOCTYPE html>
<html>
  <head>
    <title>Demo</title>
    <link rel="stylesheet" href="../index.css" />
    <link rel="stylesheet" href="../index-1.css" />
    <link rel="stylesheet" href="../index-2.css" />
    <style>
      html, body {
        height: 100%;
        margin: 0;
        background: none;
      }
      .demo {
  margin: 16px;
}
.demo-nav {
  height: 30px;
  line-height: 30px;
  margin-bottom: 16px;
  background: #f8f8f8;
}
.demo-nav a {
  line-height: 30px;
  padding: 0 8px;
}
.app-list {
  margin-top: 16px;
}
    </style>
    <script>
      // sync parent style generated by style-loader into iframe
      if (parent.location.port) {
        [].forEach.call(parent.document.getElementsByTagName('head')[0].querySelectorAll('style'), function(node) {
          document.getElementsByTagName('head')[0].appendChild(node.cloneNode(true));
        });
      }
    </script>
  </head>
  <body>
    <div id="components-breadcrumb-demo-router-4"></div>
    <script>
      function require(module) {
        if (module === 'react-router') {
          return window.ReactRouter;
        }
        if (module === 'react-router-dom') {
          return window.ReactRouterDOM;
        }
        return window.parent[module];
      }
      var mountNode = document.getElementById('components-breadcrumb-demo-router-4');
      var React = require('react');
      var ReactDOM = require('react-dom');
    </script>
    <script src="https://unpkg.com/react-router-dom@4/umd/react-router-dom.min.js"></script>
    <script>
      function bishengPluginReactPreviewer() {
  var React = require("react");

  var ReactDOM = require("react-dom");

  var _reactRouterDom = require("react-router-dom");

  var _antd = require("antd");

  var Apps = function Apps() {
    return React.createElement(
      "ul",
      {
        className: "app-list"
      },
      React.createElement(
        "li",
        null,
        React.createElement(
          _reactRouterDom.Link,
          {
            to: "/apps/1"
          },
          "Application1"
        ),
        "：",
        React.createElement(
          _reactRouterDom.Link,
          {
            to: "/apps/1/detail"
          },
          "Detail"
        )
      ),
      React.createElement(
        "li",
        null,
        React.createElement(
          _reactRouterDom.Link,
          {
            to: "/apps/2"
          },
          "Application2"
        ),
        "：",
        React.createElement(
          _reactRouterDom.Link,
          {
            to: "/apps/2/detail"
          },
          "Detail"
        )
      )
    );
  };

  var breadcrumbNameMap = {
    '/apps': 'Application List',
    '/apps/1': 'Application1',
    '/apps/2': 'Application2',
    '/apps/1/detail': 'Detail',
    '/apps/2/detail': 'Detail'
  };
  var Home = (0, _reactRouterDom.withRouter)(function (props) {
    var location = props.location;
    var pathSnippets = location.pathname.split('/').filter(function (i) {
      return i;
    });
    var extraBreadcrumbItems = pathSnippets.map(function (_, index) {
      var url = "/" + pathSnippets.slice(0, index + 1).join('/');
      return React.createElement(
        _antd.Breadcrumb.Item,
        {
          key: url
        },
        React.createElement(
          _reactRouterDom.Link,
          {
            to: url
          },
          breadcrumbNameMap[url]
        )
      );
    });
    var breadcrumbItems = [React.createElement(
      _antd.Breadcrumb.Item,
      {
        key: "home"
      },
      React.createElement(
        _reactRouterDom.Link,
        {
          to: "/"
        },
        "Home"
      )
    )].concat(extraBreadcrumbItems);
    return React.createElement(
      "div",
      {
        className: "demo"
      },
      React.createElement(
        "div",
        {
          className: "demo-nav"
        },
        React.createElement(
          _reactRouterDom.Link,
          {
            to: "/"
          },
          "Home"
        ),
        React.createElement(
          _reactRouterDom.Link,
          {
            to: "/apps"
          },
          "Application List"
        )
      ),
      React.createElement(
        _reactRouterDom.Switch,
        null,
        React.createElement(_reactRouterDom.Route, {
          path: "/apps",
          component: Apps
        }),
        React.createElement(_reactRouterDom.Route, {
          render: function render() {
            return React.createElement(
              "span",
              null,
              "Home Page"
            );
          }
        })
      ),
      React.createElement(_antd.Alert, {
        style: {
          margin: '16px 0'
        },
        message: "Click the navigation above to switch:"
      }),
      React.createElement(
        _antd.Breadcrumb,
        null,
        breadcrumbItems
      )
    );
  });
  return React.createElement(
    _reactRouterDom.HashRouter,
    null,
    React.createElement(Home, null)
  );
}
    </script>
    <script>
      var ReactDOM = require('react-dom');
      ReactDOM.render(bishengPluginReactPreviewer(), mountNode);
    </script>
  </body>
</html>
